<template>
  <div class="llatest_articles">
    <div class="articles_title">{{ title }}</div>
    <div class="articles_box csp flex-col justify-center"
         @mouseenter="move(index)"
         @mouseleave="move(-1)"
         :class="isindex==index?'active':''"
         v-for="(item,index) in 6"
         :key="index">
      <div class="articles_card">What are the precautions after using Zebutini?</div>
      <div class="articles_card">What are the precautions after using Zebutini?</div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['title'],
  data () {
    return {
      isindex: -1,
    }
  },
  methods: {
    move (index) {
      this.isindex = index
    }
  }

}
</script>

<style lang="scss" scoped>
.llatest_articles {
  margin-top: 32px;
  .articles_title {
    font-weight: bold;
    font-size: 24px;
    color: #0041a3;
    line-height: 32px;
  }
  .active {
    * {
      color: #0041a3 !important;
    }
  }
  .articles_box {
    border-bottom: 1px solid #e5e8eb;
    height: 80px;
    .articles_card {
      font-weight: 400;
      font-size: 14px;
      line-height: 24px;
      color: #293347;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }
  }
}
</style>